a {
   text-decoration: none;
}
button {
   border: none;
}
* {
   margin: 0;
   padding: 0;
}
input {
   border: none;
   outline: none;
}
:root {
   --bac-color: #f2f3f4;
   --click-color: #262626;
   --hover-color: #e5e6e8;
   --font-color-dark: #262626bf;
   --font-color: #3c3c4399;
   --easy-color: #28a745;
   --middle-color: #ffc107;
   --hard-color: #dc3545;
   --algotithm-color: #ffa116;
   --database-color: #007aff;
   --Shell-color: #2db55d;
   --multiline-color: #af52de;
}
.container {
   width: 700px;
   height: 600px;
   background-color: #fff;
   margin: 0 auto;
   user-select: none;
   /* background-color: pink; */
   padding: 20px;
   box-sizing: border-box;
}
.top-bar {
   margin-bottom: 25px;
}
.relative {
   display: flex;
   height: 40px;
   color: #262626bf;
   background-color: var(--bac-color);
   padding: 0 20px;
   border-radius: 999px;
   align-items: center;
   margin-right: 15px;
}
.hov:hover {
   background-color: var(--hover-color);
}
.allquestion-icon,
.algotithm-icon,
.multithread-icon,
.shell-icon,
.database-icon {
   margin-right: 5px;
}
.algotithm-icon {
   color: var(--algotithm-color);
}
.shell-icon {
   color: var(--Shell-color);
}
.database-icon {
   color: var(--database-color);
}
.multithread-icon {
   color: var(--multiline-color);
}
.active {
   pointer-events: none;
   color: #fff;
   background-color: var(--click-color);
   .theicon {
      color: #fff;
   }
}
.top-bar,
.second-bar {
   width: 100%;
   display: flex;
   justify-content: start;
}
.second-bar {
   justify-content: start;
}
.btn-bar {
   width: 100px;
   height: 32px;
   background-color: var(--bac-color);
   border-radius: 8px;
   margin-right: 10px;
   color: var(--font-color-dark);
}
.btn-setting {
   width: 50px;
}
.search-bar {
   width: 230px;
   background-color: var(--bac-color);
   height: 32px;
   border-radius: 8px;
   overflow: hidden;
}
.search-bar-input {
   background-color: var(--bac-color);
   height: 100%;
   padding: 0 5px;
}
.tag-row {
   height: 25px;
   margin-top: 10px;
   display: flex;
   display: none;
}
.taghidden {
   display: none !important;
}
.tag-row-onechild,
.tag-row-twochild {
   display: flex;
   align-items: center;
   padding: 0 6px;
   background-color: var(--bac-color);
   font-size: 13px;
   border-radius: 3px;
   color: rgb(38, 38, 38);
   margin-right: 8px;
}
.cancelone,
.canceltwo {
   margin-left: 8px;
   color: #bbbcbf;
}
.cancelone:hover,
.canceltwo:hover {
   color: #85858a;
}
.third-bar {
   display: flex;
   justify-content: space-between;
   height: 45px;
   align-items: center;
   border-bottom: 1px solid #e5e6e8;
}
.main-content {
   width: 100%;
   --question-hover: #1890ff;
}
.sortnav,
.question {
   width: 60px;
   color: var(--font-color);
   font-size: 15px;
}
.question {
   color: #262626;
}

.third-title,
.question-title {
   width: 215px;
   margin-left: 20px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.question-title:hover {
   color: var(--question-hover);
}

.checklist,
.difficulty,
.satatus,
.tags {
   position: relative;
}
.checklist-content,
.diffc-content {
   background-color: #fff;
   box-shadow: 0 1px 3px #ccc;
   position: absolute;
   visibility: hidden;
   border-radius: 8px;
   top: 34px;
   padding: 10px 10px;
   font-size: 14px;
   box-sizing: border-box;
   margin-top: 3px;
}
.checklist-content {
   width: 260px;
}
.que-list,
.diffc-list {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 10px;
   font-size: 14px;
   box-sizing: border-box;
}
.diffc-list:active,
.que-list:active {
   background-color: #f7f7f8;
}

.check-tab,
.diffc-tab {
   display: flex;
   padding: 0 5px;
   height: 32px;
   line-height: 32px;
   border-radius: 5px;
   align-items: center;
   justify-content: space-between;
}
.check-tab:hover,
.diffc-tab:hover {
   background-color: #f7f7f8;
}
.h-5 {
   display: none;
   color: #007aff;
}
.t {
   svg {
      display: flex;
   }
}
.diffc-content {
   width: 160px;
}
#EASY {
   color: rgb(0, 177, 155);
}
#MEDIUM {
   color: rgb(255, 184, 0);
}
#HARD {
   color: rgb(255, 45, 85);
}
.question-item {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 13px;
   height: 40px;
}
.sovling {
   display: flex;
   align-items: center;
   justify-content: space-evenly;
}
.video {
   color: rgb(199, 199, 199);
}
.evenbac {
   background-color: #f7f8fa;
}
